import Taro, { Config, useDidShow, useState } from '@tarojs/taro';
import { View, Image, Button, OpenData, Text } from "@tarojs/components";
import { AtFloatLayout } from "taro-ui";
import bgImg from '@/assets/images/bg.jpg'
import bgInnerImg from '@/assets/images/背景.png'
import shareImg from '@/assets/images/分享.png'
import moneyImg from '@/assets/images/余额.png'
import chargeImg from '@/assets/images/充值.png'
import codeImg from '@/assets/images/扫码.png'
import detailImg from '@/assets/images/游玩攻略.png'
import erweimaBgImg from '@/assets/images/二维码背景.png'

import "./index.scss";
import { REG_CDN_IMAGE_ORIGIN } from '@/utils/test';
import { apiGetUserInfo, apiPayment, apiProjects, chargeConfig } from './api';
import { CustomRequest } from '@/utils/request';

const avatar = REG_CDN_IMAGE_ORIGIN("/assets/images/page/my/头像.png");

export const Index = () => {

  const [opened, setOpened] = useState(false)

  const [activeIndex, setActiveIndex] = useState(0)

  const [money, setMoney] = useState(0)

  // const [projects, setProjects] = useState([])

  const handleClose = () => {
    setOpened(false)
  }

  // 充值使用
  const payment = (id: number) => {
    CustomRequest.post(apiPayment, { 'rechargeOptionId': id }).then((res) => {
      if (res) {
        console.log('payment sure')
      }
    })
  }

  // 扫码获得所有的项目：滑滑梯之类
  const getProjects = () => {
    CustomRequest.get(apiProjects).then((res) => {
      if (res) {
        Taro.showActionSheet({
          itemList: ["项目1", "项目2"],
          success: function (res: any) {
            if (res.tapIndex == 0) {
              Taro.scanCode({
                success: (res) => {
                  console.log(res)
                  // 扣款api
                }
              })
            }
            if (res.tapIndex == 1) {
            }
          },
          fail: function (res) {
            console.log(res.errMsg);
          }
        }).catch(() => {
          return Promise.reject();
        });
      }
    })

  }

  const getUserInfo = () => {
    CustomRequest.post(apiGetUserInfo, {}).then((res: { balance: number }) => {
      if (res) {
        setMoney(res.balance)
      }
    })
  }


  useDidShow(() => {
    getUserInfo()
  })

  return (
    <View className="index"
      style={{
        backgroundImage: `url(${bgImg})`
      }}
    >
      <View onClick={() => setOpened(true)}>
        {/* 充值 */}
      </View>
      <View className='inner'>
        <View className='up'>
          <Image src={bgInnerImg} mode='widthFix' style={{ width: '100%' }} />
          <Button
            className='share'
            openType='share'
          >
            <Image src={shareImg} style={{ width: '100%' }} mode='widthFix' />
          </Button>
          {/**头像和昵称 */}
          <View className='message'>
            {/* <View className='avatar'> */}
            <OpenData
              type="userAvatarUrl"
              defaultAvatar={avatar}
              className="avatar"
            />
            {/* </View> */}
            <View className="title">
              <OpenData type="userNickName" className="userNickName" />
            </View>
          </View>

          {/**余额 充值 扫码 */}
          <View className='box at-row'>
            <View className='box-item money'
              style={{
                backgroundImage: `url(${moneyImg})`,
                backgroundSize: 'contain'
              }}
            >
              {/* <View className='item money-left'>
                <Image src={moneyImg} mode='widthFix' style={{ width: '100%' }} />
              </View>
              <View className='item line'></View> */}
              <View className='item money-right'>
                <View className='yue'>
                  <View className='bold'>余额<Text style={{ fontSize: '20rpx' }}>（元）</Text></View>
                  <View className='color'
                    onClick={() => {
                      Taro.navigateTo({
                        url: `/packages/package-records/index`
                      })
                    }}
                  >查看消费明细</View>
                </View>
                <View className='account'>
                  <Text>￥</Text>
                  <Text
                    className='bold'
                    style={{ fontSize: '40rpx', marginRight: '20rpx' }}>{money}</Text>
                  <View className='at-icon at-icon-chevron-right'></View>
                </View>
              </View>
            </View>
            {/**扫码 游玩攻略 */}
            <View className='detail-item'>
              <View className='item code'>
                <Image style={{ width: '100rpx' }} mode='widthFix' src={chargeImg}
                  onClick={() => {
                    setOpened(true)
                  }}
                />
                <Image style={{ width: '100rpx' }} mode='widthFix' src={codeImg}
                  onClick={getProjects}
                />
              </View>
              <View className='item game'
                style={{
                  backgroundImage: `url(${detailImg})`
                }}
              >
              </View>
            </View>
          </View>
        </View>
      </View>


      {/**二维码 */}
      <View className='erweima'>
        <Image src={erweimaBgImg} style={{ width: '100%' }} mode='widthFix' />
      </View>
      <View className='layout'>
        <AtFloatLayout
          isOpened={opened}
          // title="这是个标题"
          onClose={handleClose}>
          <View className='content'>
            <View className='title'>请选择充值金额</View>

            <View className='config'>
              {
                chargeConfig.map((item, index) => (
                  <View
                    onClick={() => {
                      setActiveIndex(index)
                    }}
                    className={activeIndex === index ? 'item active' : 'item'}>
                    {item.money}
                  </View>
                ))
              }
            </View>

            <View className='btns'>
              <Button className='btn cancel'
                onClick={() => setOpened(false)}
              >取消</Button>
              <Button className='btn sure'
                onClick={() => {
                  payment(chargeConfig[activeIndex].id)
                }}
              >确认充值</Button>
            </View>

          </View>
        </AtFloatLayout>
      </View>

    </View>
  );
};

Index.config = {
  navigationBarTitleText: "开心乐园"
} as Config;
